<template>
    <!-- space-bettewn属性 -->
    <!-- ###2.flex怎么使用，flex:1代表了什么（三个属性） -->
    <!--  flex: 1; 的值是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 意思就是： 元素占据剩余宽度的 1 份，收缩比例为 1，因为 flex-basis 具有最高优先级，元素首次分配宽度（flex-direction: colunm; 则为高度）如果父元素有设置宽度，则为 0%；父元素没有设置宽度，则和 auto效果一致。
 -->
<div id="app">
    <div class="box">
 <div class="contan1">1</div>
 <div class="contan2">2</div>
 <!-- 答案：space-bettewn两端对齐 -->
    </div>

</div>
</template>
<style scoped>
.box{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.contan1{
    width: 300px;
    height: 100%;
    background-color: rgb(31, 193, 128);
}
.contan2{
    width: 300px;
    height: 100%;
    background-color: rgb(82, 180, 207);
}
</style>